<template>
	<view>
		<view class="goods-info-box" v-for="(item,i) in goods_info" :key="i" @click="gotoDetail(item)">
			<!-- 商品照片 -->
			<view class="top">
				<view class="left">
					<image  :src="item.photo"></image>
					<!-- 商品名称 -->
					<view class=name>{{item.name}}</view>
				</view>
				<!-- 信息主体区域 -->
				<view class="body">{{item.description}}</view>
			</view>
			<view class="bottom">
				<!-- 商品价格 -->
				<view class="price">￥{{item.price}}</view>

				<!-- 商品是否有货 -->
				<view class=status>{{item.status}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//请求参数对象
				queryObj:{
					//查询关键词
					query:'',
					//商品id
					id:'',
					//页码值
					pagenum:1,
					//每页显示多少数据
					pagesize:10
				},
				goods_info: [],
				//总数量，用来实现分页
				total:0,
				//节流阀，是否正在请求数据
				isLoading: false
				

			};
		},

		onLoad() {
			this.getall();
			// this.goods_info = require('@/static/data/goods_detai.json')
			// //获取商品ID
			// const goods_id =options.goods_id
			// //调用请求商品详情数据的方法
			// this.getGoodsDetail(goods_id)


		},
		onReachBottom() {
			//判断是否还有下一页数据
			// if(this.queryObj.pagenum *this.queryObj.pagesize >= this.toatl)
			// return uni.$showMsg("数据加载完毕！")
			// //判断是否正在请求其他数据，如果是，则不发起额外的请求
			// if(this.isLoading) return
			// this.queryObj.pagenum += 1
			// this.getGoodsList()
		},
		//下拉刷新的事件
		onPullDownRefresh() {
			//1.重置关键数据
			this.queryObj.pagenum = 1
			this.total = 0
			this.isLoading = false
			this.goods_info = []
			//2.重新发起请求
			// this.getGoodsList(()=> uni.stopPullDownRefresh())
			uni.stopPullDownRefresh()
			this.goods_info= this.getall()
			
		},
		methods:{
			async getall(){
				await uni.request({
					url:"http://localhost:9999/system/druginfo/all",
					success:(res)=> {
						console.log(res);
						
						this.goods_info=res.data.data
						console.log(this.goods_info);
						
						
					}
					
				}
				)
			},
			// //定义请求商品详情数据的方法
			//  getGoodsDetail(goods_id){
			// 	 console.log("方法运行了");

			// }
			//点击跳转到商品详情页面
			gotoDetail(item){
				uni.navigateTo({
					url:"/subpkg/good_item/good_item?id="+item.id
				})
			}
		}

	}
</script>

<style lang="less">
	.goods-info-box {
		padding: 10px;
		border: 2px solid #eee2ee;
		.top{	
		.left{
			text-align: center;
			image{
				height: 250px;
			}
			
			
		}
		.name{
			font-weight: bold;
			font-size: 20px;
		}

		.body {
			display: flex;
			justify-content: space-between;

			
		}
		}
		.bottom{
			display: flex;
			justify-content: space-around;
			align-items: center;
			.price {
				color: #c00000;
				font-size: 18px;
				margin: 10px 0;
			}
		}
		
	}
</style>
